import './index.scss'
const Meal = (
    props: mealObj & {
        onAdd: React.MouseEventHandler<HTMLDivElement>
        onSub: React.MouseEventHandler<HTMLDivElement>
    }
) => {
    const { title, price, description, num } = props
    return (
        <div className='meal'>
            <div className='meal-img'></div>
            <div className='meal-right'>
                <div className='meal-right-title'>{title}</div>
                <div className='meal-right-description'>{description}</div>
                <div className='meal-right-bottom'>
                    <div className='mrb-price' data-sign="￥">
                        {price}
                    </div>
                    <div className='mrb-num'>
                        {num !== 0 && (
                            <>
                                <div className='mrb-sub' onClick={props.onSub}>
                                    -
                                </div>
                                {num}
                            </>
                        )}
                        <div className='mrb-add' onClick={props.onAdd}>
                            +
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Meal
